<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

<form id="f1" action="http://www.baidu.com" method="POST">
    <div><input type="text" name="name" target="名字"></div>
    <div><input type="password" name="passwd" target="密码"></div>
    <div><input type="text" name="phone" target="电话"></div>
    <div><input type="text" name="address" target="地址"></div>
    <div><input type="text" name="email" target="邮箱"></div>
    <input type="submit" value="提交">
</form>


<script src="jquery-1.12.4.js"></script>
<script>
    $(':submit').click(function () {
        $('.error').remove();  //初始化error类，让哪个为空，哪个提示
        var flag = true;
        $('#f1').find('input[type="text"],input[type="password"]').each(function () {
            var v = $(this).val();
            if(v.length<=0){  //判断输入是否为空
                //return false; //这里return false，会终止循环，后面的input不在验证；但不影响整个函数的默认事件发生(即：当输入为空时，仍会提交到百度)；使用flag参数来解决
                flag = false;
                var msg = $(this).attr('target') + "不能为空";
                var spanTag = document.createElement('span');
                spanTag.className = 'error';
                spanTag.innerText = msg;
                $(this).after(spanTag);

            }
        });
        return flag;  // 用于控制默认提交事件是否发生。
    })
</script>
</body>
</html>